<!DOCTYPE html>
<head>
<?php include_once VIEWS.'inc/head.php'; ?>
</head>

<body>
	<div id="back-top"></div>

	<div class="w1680 pi-header">	
  	  <?php include_once VIEWS.'inc/header.php'; ?>
	</div>
	<?php include_once VIEWS.'inc/right.php'; ?>

<?php if(isset($info['id'])):?>
	<div class="w1680 pi-first shadow2">
		<div class="w1190 p-info">
			<div class="title">
				<div class="fl title-text">当前位置：<a href="<?php echo site_url('product/back/'.$info['id']); ?>"><?php echo $nav['title'];?></a> > <span>产品详情</span></div>
				<a href="<?php echo site_url('product/back/'.$info['id']); ?>"><div class="fr more">返回</div></a>
			</div>
	
			<div class="main">
				<div class="fl pi-left">
					<div class="main-title"><h2><?php echo $info['title'];?></h2></div>
					<div class="main-text">
						<div class="sub-title">轻松灵活&nbsp;&nbsp;&nbsp;&nbsp;一见倾心</div>
						<?php echo $info['content'];?>
					</div>
					<div class="paramete">
						<div class="par-title">技术参数</div>
						<div class="par-text">
							<?php echo $info['content1']?>
						</div>
					</div>

					<div class="fl phone">
						<div class="phone-title">客户服务热线</div>
						<div class="phone-num"><?php echo $info['tel']?></div>
					</div>

					<div class="fr video">
						<div class="video-en">Introduction Video</div>
						<div class="video-ch">产品视频介绍</div>
					</div>
				</div>
						<?php 
						$photo=$info['photo1'];
						if (empty($photo)) {
						        $img='';
						    }else {
						        $img=array();
						        if(strstr($photo,',')){
						            $img_id=explode(",",$photo);
						            
						            foreach ($img_id as $k=>$v){
						                $img_one=tag_photo($v);
						                $img[]=UPLOAD_URL.$img_one;
						                    
						            }
						        }else {
						            $img_one=tag_photo($photo);
						            $img['0']=UPLOAD_URL.$img_one;
						                
						        }
						    }
						?>
				<div class="fr pi-right">
						<div id="slider" class="js-scrollPics1 pull-left">
						    <ul class="slider1 js-slider1 f-cb">
							<?php if(!empty($img)):?>
							<?php foreach($img as $k=>$v):?>
						        <li class="pull-left">
						        	<img src="<?php echo $v;?>">
						        </li>
						    <?php endforeach;?>
							<?php endif;?>  
						    </ul>
						    <div class="btn left js-left1"><</div>
						    <div class="btn right js-right1">></div>
						    <div class="auto-btn1">
						    	<ul class="num1 js-num1 f-cb">
									<?php if(!empty($img)):?>
									<?php foreach($img as $k=>$v):?>
						    	    <li class="cur pull-left">
						    			<img src="<?php echo $v;?>">
						    	    </li>
						    	    <?php endforeach;?>
									<?php endif;?>
						    	</ul>
						    </div>
						</div>
				</div>

			</div>
		</div>

	</div>

	<div class="w1680 pi-second shadow">
		<div class="en-title">PRODUCT DESCRIPTION</div>
		<div class="ch-title">产品介绍</div>
		<div class="pi-down"></div>
	</div>

	<div class="w1680 pi-third shadow">
		<div class="text">
			<?php echo $info['content2']?>
		</div>
	</div>
<?php 
        else:
    header("Location:".site_url('product/index'));
    exit;
?>
<?php endif;?>
	<div class="pi-back"></div>

    <?php include_once VIEWS.'inc/footer.php'; ?>

    <div class="video-bg">
		<div class="video-box">
			<div class="video-wrap js-noclick">
				<embed class="js-noclick" width="800px" height="600px" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" src="<?php echo static_file('web/swf/video.swf'); ?>" quality="high" allowfullscreen="true" wmode="transparent" flashvars="url=<?php echo UPLOAD_URL.tag_photo($info['photo2']); ?> &amp;isAutoPlay=true " />
				<span class="x"></span>
			</div>
			<script type="text/javascript">
				$('.video-bg').width($('body').width());
				$('.video-bg').height($('body').height());
				$('.x').click(function(){
					    $('.video-bg').hide();
					    
				});
			</script>
		</div>
	
	</div>
<?php
	echo static_file('web/js/main.js');
?>
</body>
</html>
<script type="text/javascript">
	$(function() {
		
		$(".video").click(function() {
		
			$(".video-bg").show();
		});
	});
	window.onload=function(){
		/*轮播*/
		var len = $(".js-slider1 > li").length;
		var index = 0;  //图片序号
		var adTimer; //初始化定时器timer
		$('.js-slider1').width($('.js-slider1>li').length*$(".js-scrollPics1>ul>li:first").outerWidth(true)); //设置图片组外层ul宽度
		$('.js-num1').width($('.js-num1 li:first').outerWidth(true)*$('.js-num1 li').length);
		$(".js-num1 li").mouseover(function() {
		   index = $(this).index();  //获取鼠标悬浮 li 的index
		    showImg(index);
		}).eq(0).mouseover();
		//滑入停止动画，滑出开始动画.

		 $('.js-autolist').hover(function() {
			 clearInterval(adTimer);
		 }, function() {
			adTimer = setInterval(function() {
				 showImg(index);
				 right(index);
				 index++;
				 if (index == len) {       //最后一张图片之后，转到第一张
					 index = 0;
				 }
				 return(index);
			}, 3000);
		 }).trigger("mouseleave");
		 if($('.js-slider1>li').length>3){
		 	$('.js-left1').show();
		 	$('.js-right1').show();
		 }
		$('.js-left1').click(function(){
			index--;
			if (index < 0) {       //第一张图片之后，转到最后一张
			    index = len-1;
			}
			left (index,len);
		});
		$('.js-right1').click(function(){
			index++;
			if (index == len) {       //最后一张图片之后，转到第一张
			    index = 0;
			}
			right(index);
		});
		function left (_index,_len){
			if(_index==_len-1){
				var num1w=$('.js-num1 li:first').outerWidth(true);
				$(".js-num1").stop(false, true).animate({
				    "marginLeft": -(num1w*Math.floor(_index/3)*3-0) + "px"    //改变 marginTop 属性的值达到轮播的效果
				}, 800);
			}
			if(((_index+1)%3)=="0"){
				var num1w=$('.js-num1 li:first').outerWidth(true);
				$(".js-num1").stop(false, true).animate({
				    "marginLeft": -(num1w*Math.floor(_index/3)*3-0) + "px"    //改变 marginTop 属性的值达到轮播的效果
				}, 800);

			}
			showImg(_index);
		}
		function right (_index){
			if(_index!="0"){
				if(_index%3=="0"){
					var num1w=$('.js-num1 li:first').outerWidth(true);
					$(".js-num1").animate({
					    "marginLeft": -(num1w*Math.floor(_index/3)*3-0) + "px"    //改变 marginTop 属性的值达到轮播的效果
					}, 800);
				}
			}else{
				var num1w=$('.js-num1 li:first').outerWidth(true);
				$(".js-num1").animate({
				    "marginLeft": 0 + "px"    //改变 marginTop 属性的值达到轮播的效果
				}, 800);
			}
			showImg(_index);
		}
		function showImg(_index) {
		    var adWidth = $(".js-slider1>li:first").outerWidth(true);
		    $(".js-slider1").stop(true,false).animate({
		        "marginLeft": -adWidth * _index + "px"    //改变 marginLeft 属性的值达到轮播的效果
		    }, 800);
		    $(".js-num1 li").removeClass("cur")
		        .eq(index).addClass("cur");
		}
		$('.loading-sw').hide();
	}
</script>